import { Button, Modal, Select, Input, Upload, message } from 'antd';
import React, { useState } from 'react';
import { WarningOutlined } from '@ant-design/icons';
import AntDatePicker from './AntDatePicker';
import axios from 'axios'

const { TextArea } = Input;

export function AntDelBtnModal(props) {
    const [delModalOpen, setDelModalOpen] = useState(false);
    const { id, fn } = props;
    const showModal = () => {
        setDelModalOpen(true);
        console.log(id)
    };
    const handleOk = () => {
        setDelModalOpen(false);
        console.log('删除数据', id.OrderNum)
        fn(id.OrderNum)
    };
    const handleCancel = () => {
        setDelModalOpen(false);
    };

    return (
        <>
            <Button size='small' onClick={showModal}>
                删除
            </Button>
            <Modal open={delModalOpen} onOk={handleOk} onCancel={handleCancel} centered cancelText='取消' okText='确定' width={250}>
                <div style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    flexDirection: 'column'
                }}>
                    <WarningOutlined style={{
                        color: 'orange',
                        fontSize: '80px',
                        fontWeight: 'bold'
                    }} />
                    <p style={{
                        fontSize: '20px',
                        fontWeight: '500'
                    }}>确定删除?</p>
                </div>
            </Modal>
        </>
    )
}

export function AntFollowBtnModal(props) {
    const [followModalOpen, setFollowModalOpen] = useState(false);


    // 上传props
    const uploadProps = {
        name: 'file',
        action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
        headers: {
            authorization: 'authorization-text',
        },
        onChange(info) {
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
        },
    };

    const showModal = () => {
        setFollowModalOpen(true);
    };
    const handleOk = () => {
        setFollowModalOpen(false);

        // 跟进请求
        axios({
            url: "http://127.0.0.1:4523/m1/1894961-0-default/order/follow",
            params: {
                CustmerNum: props.id.key
            },
            method: "POST",
        })
            .then((res) => {
                console.log(res.data.msg)
                message.success('更新成功');
            })
            .catch((err) => console.error(err));

    };

    const handleCancel = () => {
        setFollowModalOpen(false);
    };

    // 选择1
    const [Select1, setSelect1] = useState("到访");
    const [Select2, setSelect2] = useState("了解产品");
    const [textIpt, setTextIpt] = useState('')

    // 选择1选项
    const options1 = [
        {
            value: "daofang",
            label: "到访",
        },
        {
            value: "dianhua",
            label: "电话",
        },
        {
            value: "weixin",
            label: "微信",
        },
        {
            value: "duanxin",
            label: "短信",
        },
        {
            value: "youjian",
            label: "邮件",
        },
        {
            value: "qq",
            label: "QQ",
        },
        {
            value: "qita",
            label: "其他",
        }
    ]

    // 选择2选项
    const options2 = [
        {
            value: "liaojie",
            label: "了解产品",
        },
        {
            value: "genjin",
            label: "正在跟进",
        },
        {
            value: "shiyong",
            label: "正在试用",
        },
        {
            value: "zhunbei",
            label: "准备购买",
        },
        {
            value: "yijing",
            label: "已经购买",
        },
        {
            value: "gezhi",
            label: "暂时搁置",
        }
    ]

    const onSelect1 = (values) => {
        setSelect1(values);
    };

    const onSelect2 = (values) => {
        setSelect2(values);
    };

    // 文本域的值
    const onTextAreaChange = (values) => {
        setTextIpt(values.target.value)
    };


    return (
        <>
            <Button size='small' onClick={showModal}>
                跟进
            </Button>
            <Modal title='新建跟进' open={followModalOpen} onOk={handleOk} onCancel={handleCancel} centered cancelText='取消' okText='确定' width={480}>
                <Select defaultValue="到访" style={{
                    width: 200,
                    marginRight: 10,
                }} onChange={onSelect1} options={options1} value={Select1} />
                <AntDatePicker></AntDatePicker>
                <TextArea showCount maxLength={300} onChange={onTextAreaChange} placeholder='填写跟进内容' style={{
                    width: 415,
                    marginTop: 10,
                    height: 180
                }} value={textIpt} />
                <Upload {...uploadProps}>
                    <Button>上传附件</Button>
                </Upload>
                <div>
                    <span>客户名称 : </span>
                    <Input placeholder='百事洁厕液' style={{
                        width: 200,
                        marginTop: 10,
                        marginLeft: 10
                    }} disabled />
                </div>
                <div>
                    <span>客户状态 : </span>
                    <Select defaultValue="到访" style={{
                        width: 200,
                        marginRight: 10,
                        marginTop: 10,
                        marginLeft: 10
                    }} onChange={onSelect2} options={options2} value={Select2} />
                </div>
                <div>
                    <span>联系人 : </span>
                    <Input placeholder='可口可乐' style={{
                        width: 200,
                        marginTop: 10,
                        marginLeft: 23
                    }} disabled />
                </div>
            </Modal>
        </>
    )
}

export function AntWorkSheetModal(props) {
    const [WorkSheetModalOpen, setWorkSheetModalOpen] = useState(false);

    const showModal = () => {
        setWorkSheetModalOpen(true);
    };

    const handleOk = () => {
        setWorkSheetModalOpen(false);

        // 新建工单请求
        axios({
            url: "http://127.0.0.1:4523/m1/1894961-0-default/order/createworksheet",
            params: {
               
            },
            method: "POST",
        })
            .then((res) => {
                console.log(res.data.msg)
                message.success('新建成功');
            })
            .catch((err) => console.error(err));
    };

    const handleCancel = () => {
        setWorkSheetModalOpen(false);
    };

    // 上传props
    const uploadProps = {
        name: 'file',
        action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
        headers: {
            authorization: 'authorization-text',
        },
        onChange(info) {
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
        },
    };

    return (
        <>
            <Button size='small' onClick={showModal}>
                工单
            </Button>
            <Modal title='新建工单' open={WorkSheetModalOpen} onOk={handleOk} onCancel={handleCancel} centered cancelText='取消' okText='保存' width={480}>
                <div>
                    <span>关联客户 : </span>
                    <Input placeholder={props.id.OrderCustmerName} style={{
                        width: 350,
                        marginTop: 10,
                        marginLeft: 10
                    }} disabled />
                </div>
                <div>
                    <span>关联订单 : </span>
                    <Input placeholder={props.id.OrderNum} style={{
                        width: 350,
                        marginTop: 10,
                        marginLeft: 10
                    }} disabled />
                </div>
                <div>
                    <span>工单类型 : </span>
                    <Select defaultValue="选择类型" style={{
                        width: 350,
                        marginLeft: 10,
                        marginTop: 10,
                    }} />
                </div>
                <div>
                    <span>工单标题 : </span>
                    <Input placeholder={props.id.OrderNum} style={{
                        width: 350,
                        marginTop: 10,
                        marginLeft: 10
                    }} />
                </div>
                <div>
                    <span>工单内容 : </span>
                    <TextArea showCount maxLength={300} placeholder='填写工单内容' style={{
                        width: 350,
                        marginTop: 10,
                        height: 180,
                        marginLeft: 10,
                        display: 'inline-block'
                    }} />
                </div>
                <div>
                    <span>紧急状态 : </span>
                    <Select defaultValue="选择类型" style={{
                        width: 350,
                        marginLeft: 10,
                        marginTop: 10,
                    }} />
                </div>
                <div>
                    <span>上传附件 : </span>
                    <Upload {...uploadProps}>
                        <Button style={{
                            marginLeft: 10,
                            marginTop: 10,
                        }} >选择附件</Button>
                    </Upload>
                </div>
            </Modal>
        </>
    )
}